<template>
	<view class="goods-item">
		<checkbox-group>
			<uni-card v-for="item in goodsInfo" :is-shadow="false" isFull @click="handleToGoodsDetail(item.id)">
				<uni-row class="goods-row">
					<uni-col :span="13" class="goods-rows-col1">
						<checkbox :value="item.cartValue" :checked="item.cartChecked" v-if="showCheckBox"
							@click="handleChecked(item.id)" />
						<image :src="item.imageSrc" :style="{width:imageWidth,height:imageHeight}"></image>
					</uni-col>
					<uni-col :span="11" class="goods_info">
						<text class="goods_title">{{item.name}}</text>
						<text class="goods_details">{{item.details}}</text>
						<view class="goods_price">
							<text>¥{{item.price}}/份</text>
							<view v-if="goodsType =='cart'">
								<uni-badge v-if="item.addToCartNum" class="uni-badge-left-margin"
									:text="item.addToCartNum" absolute="rightTop" size="small">
									<uni-icons type="cart" size="24" color="#ff200c" class="goods_cart"
										@click="handleAddCart(item)"></uni-icons>
								</uni-badge>
								<uni-icons v-else type="cart" size="24" color="#ff200c" class="goods_cart"
									@click="handleAddCart(item)"></uni-icons>
							</view>
							<uni-number-box v-else-if="goodsType =='numberCart'" :max="item.inventory"
								v-model="item.addToCartNum" @change="handleAddNumCart($event,item)" />
							<view class="collect" v-else-if="goodsType =='collect'">
								<uni-icons type="trash-filled" size="32" @click="handleCollect(item)"
									color="red"></uni-icons>
								<!-- <uni-icons v-else type="star" size="32" @click="handleCollect(item)"></uni-icons> -->
							</view>

						</view>
					</uni-col>
				</uni-row>
			</uni-card>
		</checkbox-group>
	</view>
</template>

<script>
	import {
		valid
	} from 'mockjs'
	import goodsCartApi from '../../api/goods/index.js'
	export default {
		data() {
			return {
				noToDetail: false,
			}
		},
		props: {
			goodsInfo: {
				type: Array,
				default () {
					return []
				}
			},
			imageWidth: {
				type: String,
				default: "290rpx"
			},
			imageHeight: {
				type: String,
				default: "200rpx"
			},
			showCheckBox: {
				type: Boolean,
				default: false
			},
			goodsType: {
				type: String,
				default: 'cart'
			}
		},
		methods: {
			handleToGoodsDetail(id) {
				if (this.noToDetail) {
					this.noToDetail = false
					return
				}
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + id,
				})
			},
			handleNoToDetail() {
				this.noToDetail = true
			},
			async handleChecked(id) {
				this.handleNoToDetail()
				await goodsCartApi.updataCartChecked({
					id
				})
			},
			async handleAddNumCart(value, item) {
				this.handleNoToDetail()
				await goodsCartApi.updataAddToCartNum({
					id: item.id,
					cartNum: value
				})
				if (value == 0) {
					this.$emit('reGerGoodsInfo')
				}
			},
			async handleAddCart(item) {
				this.handleNoToDetail()
				if (item.inventory <= item.addToCartNum) {
					uni.showToast({
						title: '商品数量已达到库存',
						icon: 'error'
					})
					return
				}
				goodsCartApi.updataAddToCartNum({
					id: item.id
				}).then(res => {
					if (res.code == 200) {
						this.$emit('reGerGoodsInfo')
						uni.showToast({
							title: '加入购物车成功',
							icon: 'success'
						})
					}
				})
			},
			handleCollect(item) {
				this.handleNoToDetail()
				goodsCartApi.updateCollectionStatus({
					id: item.id
				}).then(res => {
					if (res.code == 200) {
						this.$emit('reGerGoodsInfo')
						uni.showToast({
							title: '取消收藏成功',
						})
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-item {

		text {
			color: $uni-black;
			// font-size: 240rpx;
			display: block;
		}

		.goods-row {
			.goods-rows-col1 {
				display: flex;
				align-items: center;
			}

			.goods_info {
				display: flex;
				flex-direction: column;

				.goods_title {
					font-weight: bolder;
					font-size: 32rpx;
				}

				.goods_details {
					color: $uni-info;
					height: 120rpx;
				}

				.goods_price {
					display: flex;
					justify-content: space-between;

					.uni-badge-left-margin {
						z-index: 1;
					}

					text {
						font-size: 30rpx;
						color: #ff200c;
					}

					.goods_num_cart {
						background-color: #ff200c;
					}
				}
			}
		}

	}
</style>